<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.css" rel="stylesheet">
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.js"></script>
</head>

<body>
  <h1>拦截器练习</h1>
  <input type="text" id="ipt">
  <button id="btn">提交</button>

  <script>
    const myAxios2 = axios.create({
      baseURL: '/',
      timeout: 10000,
      headers: {}
    })
    myAxios2.interceptors.request.use((c)=>{
      const token = 'buuunjnb'
      c.headers.token = token
      NProgress.start()
      return c
    },(err)=>{
      return Promise.reject(err)
    })
    myAxios2.interceptors.response.use((c)=>{
      NProgress.done()
      if(c.data.code !== 10000){
        return Promise.reject(c.data.msg)
      }
      return c.data   
    },(err)=>{
      return Promise.reject(err)
    })
    const oBtn2 = document.getElementById('btn')
    const oIpt2 = document.getElementById('ipt')
    oBtn2.onclick = async function(){
      const iptValue2 = oIpt2.value
      try {
        const re = await myAxios2.get(`/user?_=${Date.now()}`,{
          params: {
            userId: iptValue2
          }
        })
        console.log(re);
      } catch (e) {
        console.log(e.message);
      }
      
    }
    // const myAxios1 = axios.create({
    //   baseURL: '/',
    //   timeout: 10000,
    //   headers: {}
    // })
    // myAxios1.interceptors.request.use((co)=>{
    //   const token = 'asdaffefa.afafegbs.davav'
    //   co.headers.token = token
    //   NProgress.start()
    //   return co
    // },(err)=>{
    //   return Promise.reject(err)
    // })
    // myAxios1.interceptors.response.use((co)=>{
    //   NProgress.done()
    //   if(co.data.code !== 10000){
    //     return Promise.reject(co.data.msg)
    //   }
    //   return co.data.data
    // },(err)=>{
    //   return Promise.reject(err)
    // })
    // const oIpt1 = document.getElementById('ipt')
    // const oBtn1 = document.getElementById('btn')
    // oBtn1.onclick = async function(){
    //   const iptValue = oIpt1.value
    //   try {
    //     const re = await myAxios1.get('/user',{
    //       params: {
    //         userId: iptValue
    //       }
    //     })
    //     console.log(re);
    //   } catch (e) {
    //     console.log(e.message);
    //   }
    // }
    // const myAxios = axios.create({
    //   baseURL: "/",
    //   timeout: 10000,
    //   headers: {}
    // })

    // // 添加请求拦截器
    // myAxios.interceptors.request.use(function (config) {
    //   // 在发送请求之前做些什么
    //   //1.获取token,并让请求头携带token
    //   const token = "lkhsdalkhjflsa.asdasfadsfdasf.asfasfasdfasdf";
    //   // console.log(config, "config");
    //   config.headers.token = token;

    //   //2.让进度条开始
    //   NProgress.start();

    //   return config;
    // }, function (error) {
    //   // 对请求错误做些什么
    //   return Promise.reject(error);
    // });

    // // 添加响应拦截器
    // myAxios.interceptors.response.use(function (response) {
    //   // 对响应数据做点什么
    //   //1.让进度条结束
    //   NProgress.done();

    //   //2.对请求到的结果进行处理,只拿正确的信息,如果错误的信息,直接交给异常处理
    //   if (response.data.code !== 10000) {
    //     return Promise.reject(response.data.msg)
    //   }

    //   return response.data.data
    // }, function (error) {
    //   // 对响应错误做点什么
    //   return Promise.reject(error);
    // });


    // const oIpt = document.getElementById('ipt')
    // const oBtn = document.getElementById('btn');
    // oBtn.onclick = async function () {
    //   const iptValue = oIpt.value;
    //   try {
    //     const result = await myAxios.get("/user", {
    //       params: {
    //         userId: iptValue
    //       }
    //     })
    //     console.log(result);
    //   } catch (e) {
    //     console.log(e, "出现错误");
    //   }
    // }
  </script>
</body>

</html>